<!--
功能实现：手机扫描二维码之后，手机端显示注册信息填写页面

实现步骤：

-->
<script setup>
import axios from "@/axios/index.js"
import { ref } from "vue";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import QRCode from "qrcode"

const route = useRoute();

let Id = ref()
let Name = ref()

const qrcodeElement = ref(null);  
  
async function qrCode(){  
  QRCode.toCanvas(qrcodeElement.value, `http://101.37.69.211:8000/messageOfRegister?classId=${Id.value}&className=${Name.value}`, {  
    width: 400,  
    height: 400,  
    margin: 10,  
    colorDark: "#000000",  
    colorLight: "#ffffff"
  }, (error) => {  
    if (error) console.error(error)  
    console.log('Success!');  
  });  
};  

//初始化
onMounted(async ()=>{
  const { classId } = route.query
  const { className } = route.query
  Id.value = classId
  Name.value = className
  await qrCode()
})

// async function generateCode() {
//   // 使用你的局域网 IP 地址和端口号
//   axios.get('/qrcode/generate', {
//     params: {
//       content: `http://101.37.69.211:8000/messageOfRegister?classId=${Id.value}&className=${Name.value}`, // 用户信息填写页面URL
//       width: 200,
//       height: 200
//     }
//   }).then(response => {
//     if (response.data.code === 200) {
//       qrCodeUrl.value = `data:image/png;base64,${response.data.data}`;
//       showCode.value = true;
//     } else {
//       console.error('生成二维码时发生错误:', response.data.message);
//     }
//   }).catch(error => {
//      console.error('生成二维码时发生错误:', response.data.message);
//   });
// }

</script>

<template>
  <!-- <div style="text-align: center;">
    <div>扫码注册</div>
    <img style="margin: 10% 25%" :src="qrCodeUrl" alt="Base64 Image">
  </div> -->
  <div class="block" style="text-align: center;">
      <div class="demonstration">扫码注册</div>
      <canvas ref="qrcodeElement"></canvas> 
      <!-- <el-image style="margin: 10% 25%" :src="qrCodeUrl" alt="Base64 Image">
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image> -->
    </div>
</template>

<style scoped>

</style>